<template>
  <div class="app-container">
<!--    <span v-on:click="isSelected=0" :class="['pointer-cursor', {active:isSelected==0}]">用户信息审核</span>&nbsp;-->
<!--    <span v-on:click="isSelected=1" :class="['pointer-cursor', {active:isSelected==1}]">所有的用户</span>&nbsp;-->
<!--    <h1 v-if="isSelected==0"></h1>-->
<!--    <h1 v-else-if="isSelected==1">-->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="用户昵称" prop="yhName">
          <el-input
            v-model="queryParams.yhName"
            placeholder="请输入用户昵称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="yhPhone">
          <el-input
            v-model="queryParams.yhPhone"
            placeholder="请输入手机号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="yhMail">
          <el-input
            v-model="queryParams.yhMail"
            placeholder="请输入用户邮箱"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="用户地址" prop="yhAddress">
          <el-input
            v-model="queryParams.yhAddress"
            placeholder="请输入用户地址"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!--      <el-form-item label="近90日下单数量" prop="yhXiadancount">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.yhXiadancount"-->
        <!--          placeholder="请输入近90日下单数量"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="用户头像" prop="yhPicture">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.yhPicture"-->
        <!--          placeholder="请输入用户头像"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="用户类型id" prop="yhlxId">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.yhlxId"-->
        <!--          placeholder="请输入用户类型id"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <el-form-item label="提交时间" prop="yhTjsj">
<!--          <el-date-picker clearable-->
<!--                          v-model="queryParams.yhTjsj"-->
<!--                          type="date"-->
<!--                          value-format="yyyy-MM-dd"-->
<!--                          placeholder="请选择提交时间">-->
<!--          </el-date-picker>-->
          <el-date-picker
            v-model="daterangeYhTjsj"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['system:yonghu:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['system:yonghu:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['system:yonghu:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:yonghu:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="yonghuList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="用户id" align="center" prop="yhId" />
        <el-table-column label="用户昵称" align="center" prop="yhName" />
        <el-table-column label="手机号" align="center" prop="yhPhone" />
        <el-table-column label="用户邮箱" align="center" prop="yhMail" />
        <el-table-column label="用户地址" align="center" prop="yhAddress" />
        <el-table-column label="近90日下单数量" align="center" prop="yhXiadancount" />
        <el-table-column label="用户头像" align="center" prop="yhPicture" >
          <!--        <template slot-scope="scope">-->
          <!--          <img :src="scope.row.yhPicture" style="width: 100%; height: auto;">-->
          <!--        </template>-->
          <template slot-scope="scope">
            <image-preview :src="scope.row.yhPicture" :width="50" :height="50"/>
          </template>

        </el-table-column>
        <!--      <el-table-column label="用户类型id" align="center" prop="yhlxId" />-->
        <el-table-column label="提交时间" align="center" prop="yhTjsj" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.yhTjsj, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="yhStatus" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:yonghu:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:yonghu:remove']"
            >删除</el-button>
            <el-button v-if="scope.row.yhStatus === '正常'" @click="ShangJiaClick(scope.row)" type="text" size="small">锁定用户</el-button>
            <el-button v-else @click="XiaJiaClick(scope.row)" type="text" size="small">开放用户</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改用户管理对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="用户昵称" prop="yhName">
            <el-input v-model="form.yhName" placeholder="请输入用户昵称" />
          </el-form-item>
          <el-form-item label="手机号" prop="yhPhone">
            <el-input v-model="form.yhPhone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="用户邮箱" prop="yhMail">
            <el-input v-model="form.yhMail" placeholder="请输入用户邮箱" />
          </el-form-item>
          <el-form-item label="用户地址" prop="yhAddress">
            <el-input v-model="form.yhAddress" placeholder="请输入用户地址" />
          </el-form-item>
          <!--        <el-form-item label="近90日下单数量" prop="yhXiadancount">-->
          <!--          <el-input v-model="form.yhXiadancount" placeholder="请输入近90日下单数量" />-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="用户头像" prop="yhPicture">-->
          <!--&lt;!&ndash;          <el-input v-model="form.yhPicture" placeholder="请输入用户头像" />&ndash;&gt;-->
          <!--          <el-upload-->
          <!--            class="upload-demo"-->
          <!--            action="http://localhost:8080/system/yonghu/upload"-->
          <!--            enctype="multipart/form-data"-->
          <!--            name="file"-->
          <!--            :on-preview="handlePreview"-->
          <!--            :on-remove="handleRemove"-->
          <!--            :on-success="handleSuccess"-->
          <!--            :before-remove="beforeRemove"-->
          <!--            multiple-->
          <!--            :limit="3"-->
          <!--            :on-exceed="handleExceed"-->
          <!--            :file-list="fileList">-->
          <!--            <el-button size="small" type="primary">点击上传</el-button>-->
          <!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          <!--          </el-upload>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="用户类型id" prop="yhlxId">-->
          <!--          <el-input v-model="form.yhlxId" placeholder="请输入用户类型id" />-->
          <!--        </el-form-item>-->

          <el-form-item label="用户头像" prop="yhPicture">
            <image-upload v-model="form.yhPicture"/>
          </el-form-item>

<!--          <el-form-item label="提交时间" prop="yhTjsj">-->
<!--            <el-date-picker clearable-->
<!--                            v-model="form.yhTjsj"-->
<!--                            type="date"-->
<!--                            value-format="yyyy-MM-dd"-->
<!--                            placeholder="请选择提交时间">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->
          <!--        <el-divider content-position="center">订单信息</el-divider>-->
          <!--        <el-row :gutter="10" class="mb8">-->
          <!--          <el-col :span="1.5">-->
          <!--            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDingdan">添加</el-button>-->
          <!--          </el-col>-->
          <!--          <el-col :span="1.5">-->
          <!--            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteDingdan">删除</el-button>-->
          <!--          </el-col>-->
          <!--        </el-row>-->
          <!--        <el-table :data="dingdanList" :row-class-name="rowDingdanIndex" @selection-change="handleDingdanSelectionChange" ref="dingdan">-->
          <!--          <el-table-column type="selection" width="50" align="center" />-->
          <!--          <el-table-column label="序号" align="center" prop="index" width="50"/>-->
          <!--          <el-table-column label="订单创建时间" prop="ddAddtime" width="240">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-date-picker clearable v-model="scope.row.ddAddtime" type="date" value-format="yyyy-MM-dd" placeholder="请选择订单创建时间" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="商品ID" prop="ddSpId" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input v-model="scope.row.ddSpId" placeholder="请输入商品ID" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="关联配送员ID" prop="ddPsyId" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input v-model="scope.row.ddPsyId" placeholder="请输入关联配送员ID" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="购买数量" prop="ddShuliang" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input v-model="scope.row.ddShuliang" placeholder="请输入购买数量" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="交易状态ID" prop="ddJysId" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input v-model="scope.row.ddJysId" placeholder="请输入交易状态ID" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="操作" prop="ddCaozuo" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input v-model="scope.row.ddCaozuo" placeholder="请输入操作" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="订单分类ID" prop="ddDdflId" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input v-model="scope.row.ddDdflId" placeholder="请输入订单分类ID" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="订单配送方式" prop="ddPeisong" width="150">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-input v-model="scope.row.ddPeisong" placeholder="请输入订单配送方式" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--        </el-table>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

<!--    </h1>-->
  </div>
</template>

<script>
import { listYonghu, getYonghu, delYonghu, addYonghu, updateYonghu, modifyStatus } from "@/api/system/yonghu";

export default {
  name: "Yonghu",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedDingdan: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户管理表格数据
      yonghuList: [],
      // 订单表格数据
      dingdanList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 订单配送方式时间范围
      daterangeYhTjsj: [],
      fileList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        yhName: null,
        yhPhone: null,
        yhMail: null,
        yhAddress: null,
        yhXiadancount: null,
        yhPicture: null,
        yhlxId: null,
        yhTjsj: null,
        yhStatus: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      isSelected:0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询用户管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeYhTjsj && '' != this.daterangeYhTjsj) {
        this.queryParams.params["beginYhTjsj"] = this.daterangeYhTjsj[0];
        this.queryParams.params["endYhTjsj"] = this.daterangeYhTjsj[1];
      }
      listYonghu(this.queryParams).then(response => {
        this.yonghuList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.panduan();
      });
    },
    panduan(){
      for (let i = 0; i<this.yonghuList.length; i++){
        switch (this.yonghuList[i].yhStatus) {
          case 0:
            this.yonghuList[i].yhStatus = "正常"
            break;
          case 1:
            this.yonghuList[i].yhStatus = "已锁定"
            break;
        }
      }
    },
    ShangJiaClick(obj){
      console.log(obj)
      modifyStatus({yhId: obj.yhId,
        yhStatus:1})
      .then(response=>{
        this.getList();
      });
    },
    XiaJiaClick(obj){
      console.log(obj)
      modifyStatus({yhId: obj.yhId,
        yhStatus:0})
        .then(response=>{
          this.getList();
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        yhId: null,
        yhName: null,
        yhPhone: null,
        yhMail: null,
        yhAddress: null,
        yhXiadancount: null,
        yhPicture: null,
        yhlxId: null,
        yhTjsj: null,
        yhStatus: null
      };
      this.dingdanList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.yhId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const yhId = row.yhId || this.ids
      getYonghu(yhId).then(response => {
        this.form = response.data;
        this.dingdanList = response.data.dingdanList;
        this.open = true;
        this.title = "修改用户管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.dingdanList = this.dingdanList;
          if (this.form.yhId != null) {
            updateYonghu(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addYonghu(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const yhIds = row.yhId || this.ids;
      this.$modal.confirm('是否确认删除用户管理编号为"' + yhIds + '"的数据项？').then(function() {
        return delYonghu(yhIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	/** 订单序号 */
    rowDingdanIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 订单添加按钮操作 */
    handleAddDingdan() {
      let obj = {};
      obj.ddAddtime = "";
      obj.ddSpId = "";
      obj.ddPsyId = "";
      obj.ddShuliang = "";
      obj.ddJysId = "";
      obj.ddCaozuo = "";
      obj.ddDdflId = "";
      obj.ddPeisong = "";
      this.dingdanList.push(obj);
    },
    /** 订单删除按钮操作 */
    handleDeleteDingdan() {
      if (this.checkedDingdan.length == 0) {
        this.$modal.msgError("请先选择要删除的订单数据");
      } else {
        const dingdanList = this.dingdanList;
        const checkedDingdan = this.checkedDingdan;
        this.dingdanList = dingdanList.filter(function(item) {
          return checkedDingdan.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleDingdanSelectionChange(selection) {
      this.checkedDingdan = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/yonghu/export', {
        ...this.queryParams
      }, `yonghu_${new Date().getTime()}.xlsx`)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.form.yhPicture='';
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(response) {
      console.log(response);
      this.form.yhPicture=response;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  }
};
</script>
<style scoped>
.active{
  color: skyblue;
}
.pointer-cursor {
  cursor: pointer;
}
</style>
